<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
            /*border-top-width: 10px;
            border-top-color: #000;
             实线：solid 虚线: dashed 点县：dotted
            border-top-style:solid;  */
            /*border-top: 10px solid #000;
            border-left: 10px dashed #000;
            border-right: 10px dotted #000;
            border-bottom: 10px solid #000;*/
            border: 50px solid #000;
            /*padding-top: 20px;
            padding-left: 40px;
            padding-right: 100px;
            padding-bottom: 200px; */
            /*分别设置 上 右 下 左*/
            /*padding: 20px 100px 200px 40px;*/
            /* 分别设置上 左右 下*/
            /*padding: 20px 100px 200px;*/  
            /* 分别设置 上下 左右*/     
            /*padding: 20px 100px;*/
            /*分别设置上下左右*/
            padding: 100px;
            /*margin-top: 50px;
            margin-left: 100px;
            margin-right: 200px;
            margin-bottom: 300px;*/
            /*margin: 50px 200px 300px 400px;*/
            margin: 50px auto;
            /*分别设置 上 右 下 左*/
            /*margin: 20px 100px 200px 40px;*/
            /* 分别设置上 左右 下*/
            /*margin: 20px 100px 200px;*/   
            /* 分别设置 上下 左右*/     
            /*margin: 20px 100px;*/
            /*分别设置上下左右*/
            /*margin: 20px 100px;*/
            /*分别设置上下左右
            margin: 100px;*/
        }
    </style>
</head>
<body>
    <div class="box">
            元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
    </div>
    <div class="box">
        元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
    </div>
</body>
</html>